import React from "react";
import { connect } from 'react-redux'
import { StyleSheet, View, Image, Text } from "react-native";
import { createForm } from 'rc-form';
import { List, InputItem, Button, Toast, Icon, WhiteSpace } from '@ant-design/react-native';
import { createAction, NavigationActions } from '@utils'

// @connect(({ app }) => ({ ...app }))
class Login extends React.Component {
	static navigationOptions = {
		header: null
	};
	onSubmit = () => {
		const {
			dispatch,
			form: {
				validateFields
			}
		} = this.props

		validateFields((error, data) => {
			if (!error) {
				dispatch({
					type: 'app/login',
					payload: {
						...data
					}
				})
			}
		})
	};
	render() {
		const { loading } = this.props
		const { getFieldProps, getFieldError } = this.props.form;
		return (
			<View style={styles.container}>
		        <View style={styles.header}>
		           <Image style={styles.logo} source={require('../../assets/images/logo.png')} /> 
		        </View>
		        <WhiteSpace />
		        <View style={styles.body}>
		            <List>
		              <InputItem
		                {...getFieldProps('username', {
		                  rules: [{
		                    required: true,
		                    message: '请输入姓名',
		                  }]
		                })}
		                error={!!getFieldError('username')}
		                placeholder="请输入用户名"
		              />
		              <InputItem
		              	type="password"
		                {...getFieldProps('password', {
		                  rules: [{
		                    required: true,
		                    message: '请输入密码',
		                  }]
		                })}
		                error={!!getFieldError('password')}
		                placeholder="请输入密码"
		              >
		              </InputItem>
		              <Button type="primary" disabled={!!getFieldError('username') || !!getFieldError('password')} loading={loading} onPress={this.onSubmit}>登录</Button>
		            </List>
		          </View>
		      </View>
		);
	}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 30,
    backgroundColor: '#F5FCFF',
  },
  header: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  body: {
    flex: 2,
    width: '100%'
  },
  logo: {
    width: 56,
    height: 56
  }
});

const LoginForm = createForm()(Login)

export default connect(({ loading }) => ({ loading: loading.effects['app/login'] }))(LoginForm)